js實現(xiàn)簡單的貪吃蛇游戲
更新時間：2020年04月23日 09:34:17 作者：qq_41634321
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)簡單的貪吃蛇游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)貪吃蛇游戲的具體代碼，供大家參考，具體內(nèi)容如下
運行截圖：
源碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>貪吃蛇小游戲</title>
<style>
body {
margin:0px;
padding:0px;
}
#main {
margin:100px;
}
.btn {
width:100px;
height:40px;
}
.gtitle {
font-size:25px;
font-weight: bold;
}
#gnum {
color:red;
}
</style>
</head>
<body>
<div id="main">
<h1>貪吃蛇</h1>
<input class="btn" type="button" value="開始游戲" id="begin" />
<input class="btn" type="button" value="暫停游戲" id="pause" />
<span class="gtitle">第 <span id="gnum">1</span> 關(guān)</span>
<script>
var main = document.getElementById('main');
var showcanvas = true; //是否開啟畫布格子
/**
* 地圖對象的構(gòu)造方法
* @param atom 原子大小寬和高是一樣的 10
* @param xnum 橫向原子的數(shù)量
* @param ynum 縱向原子的數(shù)量
* @constructor
*/
function Map(atom, xnum, ynum){
this.atom = atom; // 20x20
this.xnum = xnum; //
this.ynum = ynum;
this.canvas = null;
//創(chuàng)建畫布的方法
this.create = function(){
this.canvas = document.createElement('div');
this.canvas.style.cssText="position:relative;top:40px;border:1px solid darkred; background:#FAFAFA";
this.canvas.style.width = this.atom * this.xnum + 'px'; //畫布的寬
this.canvas.style.height = this.atom * this.ynum + 'px'; //畫布的高
main.appendChild(this.canvas);
if(showcanvas) {
for(var y=0; y<ynum; y++) {
for (var x = 0; x < xnum; x++) {
var a = document.createElement('div');
a.style.cssText = "border:1px solid yellow";
a.style.width = this.atom + 'px';
a.style.height = this.atom + 'px';
a.style.backgroundColor = "LightSkyBlue";
this.canvas.appendChild(a);
a.style.position = 'absolute';
a.style.left = x * this.atom + 'px';
a.style.top = y*this.atom+'px';
}
}
}
}
}
/**
* 創(chuàng)建食物的構(gòu)造方法
* @param map 地圖對象
* @constructor
*/
function Food(map){
this.width = map.atom;
this.height = map.atom;
this.bgcolor= "rgb("+Math.floor(Math.random()*200)+", "+Math.floor(Math.random()*200)+", " + Math.floor(Math.random() * 200) +")";
this.x = Math.floor(Math.random()*map.xnum);
this.y = Math.floor(Math.random()*map.ynum);
this.flag = document.createElement('div');
this.flag.style.width = this.width + 'px';
this.flag.style.height = this.height + 'px';
this.flag.style.backgroundColor = this.bgcolor;
// this.flag.style.borderRadius = '50%';
this.flag.style.position = 'absolute';
this.flag.style.left = this.x * this.width +'px';
this.flag.style.top = this.y * this.height + 'px';
map.canvas.appendChild(this.flag);
}
function Snake(map) {
//設(shè)置寬，高
this.width=map.atom;
this.height = map.atom;
//默認(rèn)走的方向
this.direction = 'right';
this.body = [
{x:2, y:0}, //蛇頭， 第一點 0
{x:1, y:0}, //蛇脖子, 第二點 1
{x:0, y:0} //蛇尾， 第三點 2
//{x:null, y:null, flag:null} 3
];
//顯示蛇
this.display = function(){
for(var i=0; i<this.body.length; i++){
if(this.body[i].x !=null) { //當(dāng)吃到食物時， x==null, 不能新建， 不然會在0,0處理新建一個
var s = document.createElement('div');
// 將節(jié)點保存到一個狀態(tài)變量中， 以便以后刪除使用
this.body[i].flag = s;
//設(shè)置蛇的樣式
s.style.width = this.width + 'px';
s.style.height = this.height + 'px';
s.style.backgroundColor="rgb("+Math.floor(Math.random()*200)+", "+Math.floor(Math.random()*200)+", " + Math.floor(Math.random() * 200) +")";
//s.style.borderRadius = '50%';
//設(shè)置位置
s.style.position = 'absolute';
s.style.left = this.body[i].x * this.width + 'px';
s.style.top = this.body[i].y * this.height + 'px';
//添加到地圖中
map.canvas.appendChild(s);
}
}
}
//讓蛇運動起來
this.run = function() {
for(var i=this.body.length-1; i>0; i--) {
this.body[i].x = this.body[i-1].x;
this.body[i].y = this.body[i-1].y;
}
//默認(rèn)是right left up down
// 根據(jù)方向處理蛇頭
switch(this.direction) {
case "left": this.body[0].x -=1; break;
case "right": this.body[0].x +=1;break;
case "up": this.body[0].y -=1; break;
case "down": this.body[0].y +=1; break;
}
//判斷蛇頭吃到食物， xy和食物的XY重合
if(this.body[0].x ==food.x && this.body[0].y == food.y ){
//蛇加一節(jié)， 根據(jù)最后節(jié)點定
this.body.push({x:null, y:null, flag:null});
//判讀一下設(shè)置級別
if(this.body.length > l.slength) {
l.set();
}
map.canvas.removeChild(food.flag);
food = new Food(map);
}
//判斷是否出界， 蛇頭
if(this.body[0].x <0 || this.body[0].x > map.xnum-1 || this.body[0].y <0 || this.body[0].y > map.ynum -1) {
clearInterval(timer); //清除定時器
alert("怎么這么不小心撞墻了呢，摸摸頭");
//重新開始游戲
restart(map, this)
return false;
}
//判讀是否和自己重合
for(var i=4; i<this.body.length; i++){
if(this.body[0].x == this.body[i].x && this.body[0].y == this.body[i].y) {
clearInterval(timer); //清除定時器
alert("呀，怎么喜歡咬自己的肉肉");
//重新開始游戲
restart(map, this)
return false;
}
}
for(var i=0; i<this.body.length; i++){
if(this.body[i].flag != null) { //當(dāng)吃到食物， flag是等null, 且不能刪除
map.canvas.removeChild(this.body[i].flag)
}
}
this.display();
}
}
//重新開始游戲
function restart(map, snake) {
for(var i=0; i<snake.body.length; i++) {
map.canvas.removeChild(snake.body[i].flag);
}
snake.body = [
{x:2, y:0}, //蛇頭， 第一點 0
{x:1, y:0}, //蛇脖子, 第二點 1
{x:0, y:0} //蛇尾， 第三點 2
];
snake.direction = 'right';
snake.display();
map.canvas.removeChild(food.flag);
food = new Food(map);
}
//設(shè)置級別對象
function Level() {
this.num = 1; //第幾級別
this.speed= 300; //毫秒， 每升一關(guān)， 數(shù)量減少20， 速度就加快了
this.slength = 8; //每個關(guān)的長度判斷
this.set = function() {
this.num++;
if(this.speed <= 50) {
this.speed = 50;
}else{
this.speed -=50;
}
this.slength += 10; //這個可以自己定義
this.display();
start(); //重新開始， 速度加快
}
this.display = function() {
document.getElementById('gnum').innerHTML = this.num;
}
}
var l = new Level();
l.display();
//創(chuàng)建地圖對象
var map = new Map(20, 40, 20);
map.create(); //顯示畫布
//構(gòu)造食物對象
var food = new Food(map);
//構(gòu)造蛇對象
var snake = new Snake(map);
snake.display();
// 組body加鍵盤事件， 上下左右
window.onkeydown = function(e){
var event = e || window.event;
// console.log(event.keyCode);
switch(event.keyCode) {
case 38:
if(snake.direction != "down") {
snake.direction = "up";
}
break;
case 40:
if(snake.direction != "up") {
snake.direction = "down";
}
break;
case 37:
if(snake.direction != "right") {
snake.direction = "left";
}
break;
case 39:
if(snake.direction != "left") {
snake.direction = "right";
}
break;
}
}
var timer; //變量可以提升
function start() {
clearInterval(timer);
timer = setInterval(function(){
snake.run();
},l.speed);
}
document.getElementById('begin').onclick=function(){
start();
}
document.getElementById('pause').onclick=function() {
clearInterval(timer);
}
</script>
</div>
</body>
</html>
小編還為大家準(zhǔn)備了精彩的專題：javascript經(jīng)典小游戲匯總
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
layui下拉列表select實現(xiàn)可輸入查找的方法
今天小編就為大家分享一篇layui下拉列表select實現(xiàn)可輸入查找的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要為大家介紹了tree?shaking功能及使用原理詳細(xì)解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪的相關(guān)資料2023-01-01
這篇文章主要介紹了css與javascript跨瀏覽器兼容性,包括常見的css兼容性問題與javascript兼容性問題,以及IE與Firefox等常用瀏覽器的兼容性分析,需要的朋友可以參考下2014-09-09
這篇文章介紹了JS操作數(shù)據(jù)庫的實例代碼，有需要的朋友可以參考一下2013-10-10
js showModalDialog 彈出對話框的簡單實例(子窗體)
本篇文章主要是對js_showModalDialog彈出對話框的簡單實例(子窗體) 進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
js中setTimeout的妙用--防止循環(huán)超時
本文主要介紹了使用setTimeout實現(xiàn)防止循環(huán)超時的方法，具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
非常酷的javascript拖動分頁功能，無縫循環(huán)分頁，拖動鼠標(biāo)即可完成分頁，鼠標(biāo)向左拖動回到前一頁，向右拖動則翻開第二頁，還帶有動畫特效，著實很不錯，界面黑色，非主流風(fēng)格，相信很多人會喜歡的。2015-05-05
js綁定事件this指向發(fā)生改變的問題將在本文進(jìn)行詳細(xì)探討下，感興趣的朋友可以參考下哈，希望對你有所幫助2013-04-04
本文主要介紹了js仿淘寶評價評分功能——點擊心形生成得分（有半心選擇），具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
javascript動態(tài)添加表格數(shù)據(jù)行(ASP后臺數(shù)據(jù)庫保存例子)
本文，我將以一個類似的例子來做一個前臺用Javascript動態(tài)添加數(shù)據(jù)項，后臺保存到數(shù)據(jù)庫的例子。2010-05-05