溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了使用javascript怎么制作貪吃蛇小游戲，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
html,body{
width: 100%;
height: 100%;
overflow: hidden;
}
* {
margin: 0;
padding: 0;
}
li{
width: 20px;
height: 20px;
border-radius: 50%;
background: chocolate;
position: absolute;
left: 240px;
top: 60px;
z-index: 1;
list-style: none;
}
#box{
position: absolute;
left:240px;
top: 50px;
width:800px;
height:600px;
}
</style>
</head>
<body>
<span>
游戲玩法：上下左右控制小蛇的方向。
撞到邊緣游戲結束。
長按方向鍵即可加速。
</span>
<ul id="box">
<li></li>
<li></li>
<li></li>
</ul>
</body>js開始
function $(id){
return document.getElementById(id);
}
window.onload = function () {
// 創建背景
js_background();
// 隨機食物
js_food();
// 創建貪吃蛇
create_snake();
document.onkeydown = function(event){
let evt = event || window.event;
switch (evt.keyCode) {
case 37:direction="left";break;
case 38:direction="up";break;
case 39:direction="right";break;
case 40:direction="down";break;
default:;
// console.log(evt.keyCode);
}
start_snake()
}
}//貪吃蛇方向// 創建背景
// 貪吃蛇方向// 創建背景
var direction = "right";
// 創建背景
function js_background(){
let bg = document.createElement("div");
bg.id = "js_bg";
bg.style.cssText = "position:relative;margin :50px auto; background:skyblue; width:800px; height:600px;";
document.body.appendChild(bg);
}//隨機食物
var food_left = 0;
var food_top = 0;
function js_food(){
food_left = parseInt(Math.random()*800/20)*20;
food_top = parseInt(Math.random()*600/20)*20;
let foodDiv = document.createElement("div");
foodDiv.style.cssText = "position:absolute;width:20px; height: 20px; border-radius:50%; background:yellow;";
foodDiv.style.left = food_left+"px";
foodDiv.style.top = food_top+"px";
foodDiv.id = "foodDiv";
$("js_bg").appendChild(foodDiv);
}//創建貪吃蛇
function create_snake(){
let lis = document.getElementsByTagName("li");
lis[0].style.backgroundColor = "black";
lis[0].style.zIndex = 1;
for(let i = 0; i < lis.length; i++){
lis[i].style.left = 280-(i*20)+"px";
lis[i].style.top = 60+"px";
}
}//定時器
// 定時器
let timre = setInterval(start_snake,200);
let lis = document.getElementsByTagName("li");
function start_snake(){
let left=parseFloat(lis[0].style.left);
let top= parseFloat(lis[0].style.top);
// console.log(top)
switch (direction) {
case "left":left = (left-20);break;
case "up":top = (top-20);break;
case "right":left = (left+20);break;
case "down":top = (top+20);break;
default:;
}
if(left<0 || left>800-20 || top<0 || top>600-20){
window.clearInterval(timre);
alert("親，您Game Over");
return;
}
// for(let i = 1; i <= lis.length-1; i++){
// lis[i].style.left = lis[i-1].style.left;
// lis[i].style.top = lis[i-1].style.top;
// }
for(var i=lis.length-1;i>0;i--){
lis[i].style.left = lis[i-1].style.left;
lis[i].style.top = lis[i-1].style.top;
}
// 改變第一節
lis[0].style.left = left+"px";
lis[0].style.top = top+"px";
// console.log(food_top+"----------");
// console.log(top);
if(left == food_left && top == food_top){
eat();
}
}
function eat() {
$("js_bg").removeChild($("foodDiv"));
js_food();
// alert("ll");
let li = document.createElement("li");
$("js_bg").appendChild(li);
// create_snake();
}1.JavaScript主要用來向HTML頁面添加交互行為。 2.JavaScript可以直接嵌入到HTML頁面，但寫成單獨的js文件有利于結構和行為的分離。 3.JavaScript具有跨平臺特性，在絕大多數瀏覽器的支持下，可以在多種平臺下運行。
上述內容就是使用javascript怎么制作貪吃蛇小游戲，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
