JS實現(xiàn)簡易貪吃蛇游戲
更新時間：2020年08月24日 09:54:40 作者：彎月liang
這篇文章主要為大家詳細介紹了JS實現(xiàn)簡易貪吃蛇游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JS實現(xiàn)簡易貪吃蛇的具體代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
#body{
width: 900px;/*長寬最好是obj的倍數(shù)*/
height: 600px;
border-width: 10px;
border-style: solid;
border-color: blue;
line-height:600px;/*文本垂直居中*/
text-align: center;/*文本水平居中*/
position: relative;/*相對定位*/
left: 0px;
top: 0px;
}
#obj{
width: 30px;
height: 30px;
background-color: red;
position: absolute;/*絕對定位*/
left: 0px;
top: 0px;
z-index: 1;/*頭部在上層顯示*/
}
div{
text-align: center;
line-height:30px;
}
</style>
</head>
<body id='body'>
<!--內(nèi)容-->
按awsd移動
<div id='obj'></div>
<select id='speed' onclick="setspeed(this)">
<option value="100">快速</option>
<option value="500">中速</option>
<option value="1000" selected>慢速</option>
</select>
| <button onclick="lenbodyadd()">身體+1</button>
| <button onclick="stopspeed()">暫停</button>
<div class="div"></div>
</body>
</html>
<script>
var val={key:"d"};//默認向右移動
var key = document.getElementById("body");
key.onkeydown =f; //注冊keydown事件處理函數(shù)
var divnum=1;//身體每節(jié)編號
var lenbody=5;//默認身體長度
var speed=1000;//默認速度
var obj=document.getElementById('obj');
var myWidth=parseInt(getComputedStyle(obj,null).getPropertyValue('width'));
var myHeight=parseInt(getComputedStyle(obj,null).getPropertyValue('height'));
var clientH= document.body.clientHeight;//獲取body高
var clientW= document.body.clientWidth;//獲取body寬
var foodLeft=0;//食物x坐標
var foodTop=0;//食物y坐標
function f (va) {
var e = e || window.event; //標準化事件處理
let s = '';//val.type + " " + val.key; //獲取鍵盤事件類型和按下的值
let key=val.key;
val=va;
var myTop=parseInt(getComputedStyle(obj,null).getPropertyValue('top'));//獲取精靈y坐標 parseInt(obj.style.top);
var myLeft=parseInt(getComputedStyle(obj,null).getPropertyValue('left'));//獲取精靈x坐標 parseInt(obj.style.left);
var movePx=myWidth;//每次移動的距離
var move=0;
if(key=='w'){
move=myTop-movePx;//每次移動10
if(move<0 || move>clientH){
return false;//不能超過邊界
}
obj.style.top=move+'px';
s='上';
}
if(key=='s'){
move=myTop+movePx;
if(move<0 || move>clientH-myHeight){
return false;
}
obj.style.top=move+'px';
s='下';
}
if(key=='a'){
move=myLeft-movePx;
if(move<0 || move>clientW){
return false;
}
obj.style.left=move+'px';
s='左';
}
if(key=='d'){
move=myLeft+movePx;
if(move<0 || move>clientW-myWidth){
return false;
}
obj.style.left=move+'px';
s='右';
}
obj.innerText=s;//設(shè)置文本 & 清楚之前的元素
console.log(move+' top:'+myTop+' left:'+myLeft);
//移除之前的身體元素，使有頭有尾
if(document.getElementsByClassName('div').length>=lenbody){
document.getElementsByClassName('div')[0].parentNode.removeChild(document.getElementsByClassName('div')[0]);
}
//div身體元素隨后移動
let newMyMoveWidth=myLeft;
let newMyMoveHeight=myTop;
let div=document.createElement('div');
div.className ='div';
div.style.width = myWidth + 'px';
div.style.height = myHeight + 'px';
div.style.position = 'absolute';
div.style.left=newMyMoveWidth + 'px';
div.style.top=newMyMoveHeight + 'px';
div.style.backgroundColor='blue';
div.innerHTML=divnum;//設(shè)置文字|方便識別div順序
obj.parentNode.appendChild(div);
console.log('newMyMoveWidth:'+newMyMoveWidth+' newMyMoveHeight:'+newMyMoveHeight);
divnum++;
ifeatfood(myLeft,myTop);
} /*f() end--*/
//生成食物
function setfood(){
foodLeft=parseInt(Math.random()*clientW);
foodTop=parseInt(Math.random()*clientH);
let div=document.createElement('div');
div.id ='food';
div.style.width = myWidth + 'px';
div.style.height = myHeight + 'px';
div.style.position = 'absolute';
div.style.left= foodLeft + 'px';
div.style.top= foodTop + 'px';
div.style.backgroundColor='pink';
div.innerHTML='吃';//設(shè)置文字|方便識別div順序
document.body.appendChild(div);
}
setfood();
//判斷吃到食物
function ifeatfood(myLeft,myTop){
//判斷是否吃到食物
if(Math.abs(foodLeft-myLeft)<myWidth && Math.abs(foodTop-myTop)<myHeight){
lenbodyadd();//長度+1
//刪除舊food，生成新food
document.getElementById('food').parentNode.removeChild(document.getElementById('food'));
setfood();
}
}
//吃到食物身體加1
function lenbodyadd(){
lenbody++;
}
//保持移動
var setinter=setInterval((function move(){
f(val);
}),speed);
//設(shè)置移動速度
function setspeed(obj){
speed=obj.options[obj.options.selectedIndex].value;
stopspeed();
setinter=setInterval((function move(){
f(val);
}),speed);
}
//停止移動
function stopspeed(){
clearInterval(setinter);
}
//窗口改變時跳轉(zhuǎn)-防f12
window.onresize = ()=>{
console.log(window.innerWidth,window.innerHeight);
//window.location.;
}
</script>
更多有趣的經(jīng)典小游戲?qū)崿F(xiàn)專題，分享給大家：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
js將字符串轉(zhuǎn)成正則表達式的實現(xiàn)方法
js將字符串轉(zhuǎn)成正則表達式的實現(xiàn)方法。其實很簡單哦！需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
這篇文章主要介紹了根據(jù)配置文件加載js依賴模塊,解決方法是筆者自己的思路，拋磚引玉，需要的朋友可以參考下2014-12-12
這篇文章主要介紹了JavaScript拖拽、碰撞、重力及彈性運動實現(xiàn)方法,涉及JavaScript數(shù)學(xué)運算結(jié)合時間函數(shù)實現(xiàn)運動效果的相關(guān)技巧,需要的朋友可以參考下2016-01-01
這篇文章介紹了js猜數(shù)字小游戲的簡單實現(xiàn)代碼，很好玩的游戲哦，可以看看你的智商 是否驚人額2013-07-07
JavaScript中數(shù)組reduce()方法使用詳情
這篇文章主要介紹了JavaScript中數(shù)組reduce()方法使用詳情，reduce()對數(shù)組中的每個元素進行累加，返回一個新的值，可以傳入初始值，更多相關(guān)內(nèi)容需要的小伙伴可以參考一下下面文章介紹2022-09-09
這篇文章主要為大家詳細介紹了js實現(xiàn)網(wǎng)頁隨機驗證碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
微信小程序?qū)崿F(xiàn)點擊按鈕修改字體顏色功能【附demo源碼下載】
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)點擊按鈕修改字體顏色功能,涉及微信小程序wx:for循環(huán)讀取data數(shù)值及事件綁定修改元素屬性相關(guān)操作技巧,需要的朋友可以參考下2017-12-12
微信小程序tabBar模板用法實例分析【附demo源碼下載】
這篇文章主要介紹了微信小程序tabBar模板用法,結(jié)合具體實例形式分析了tabBar模板的定義、配置、引用等相關(guān)操作技巧,需要的朋友可以參考下2017-11-11
Bootstrap，來自 Twitter，是目前最受歡迎的前端框架。這篇文章主要介紹BootStrap組件之菜單按鈕圖標組件的相關(guān)資料,需要的朋友可以參考下2016-04-04
這篇文章主要介紹了JavaScript實現(xiàn)的超簡單計算器功能,可實現(xiàn)基本的四則運算并帶有驗證功能,代碼中備有較為詳盡的注釋便于理解,需要的朋友可以參考下2017-12-12