溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了JS制作簡易版貪吃蛇小游戲的案例，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建網(wǎng)頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<script type="text/javascript">
//① 繪制地圖
function Map() {
//私有成員(不會隨便發(fā)生變化)
var w = 800;
var h = 400;
//成員方法，繪制地圖
this.showmap = function () {
//創(chuàng)建p、設置css樣式、追加給body
var tu = document.createElement('p');
tu.style.width = w + "px";
tu.style.height = h + "px";
tu.style.backgroundImage = "url(./12.jpg)";
document.body.appendChild(tu);
}
}
//② 繪制食物
function Food() {
var len = 20;
//把食物(權值)坐標聲明為公開的，以便在外部訪問
this.xFood = 0;
this.yFood = 0;
this.piece = null; //頁面上唯一的食物對象
//繪制
this.showfood = function () {
//創(chuàng)建p、設置css樣式、追加給body
if (this.piece === null) {
this.piece = document.createElement('p');
this.piece.style.width = this.piece.style.height = len + "px";
this.piece.style.backgroundColor = "green";
this.piece.style.position = "absolute";
document.body.appendChild(this.piece);
}
//食物設置絕對定位(position/left/top)
//食物位置“隨機”擺放
//移動步進值：20px
//食物“權值”坐標： X軸(0-39) Y軸(0-19)
//食物真實坐標：權值坐標 * 步進值
this.xFood = Math.floor(Math.random() * 40); //0-39的隨機數(shù)
this.yFood = Math.floor(Math.random() * 20); //0-19的隨機數(shù)
this.piece.style.left = this.xFood * len + "px";
this.piece.style.top = this.yFood * len + "px";
}
}
//③ 小蛇
function Snake() {
var len = 20;
this.redirect = "right"; //默認向右邊移動
//后期snakebody要變化，因此聲明為公開的(每個蛇節(jié)：[x坐標，y坐標，顏色，蛇節(jié)對象])
this.snakebody = [[0, 1, 'green', null], [1, 1, 'green', null], [2, 1, 'green', null], [3, 1, 'red', null]];
//a.繪制小蛇
this.showsnake = function () {
//遍歷小蛇的各個蛇節(jié)，并依次創(chuàng)建即可
for (var i = 0; i < this.snakebody.length; i++) {
//this.snakebody[i]//代表每個蛇節(jié)
//創(chuàng)建蛇節(jié)p
if (this.snakebody[i][3] === null) {//判斷沒有創(chuàng)建對應的蛇節(jié)
this.snakebody[i][3] = document.createElement('p');
//設置css樣式(寬度、高度、顏色)
this.snakebody[i][3].style.width = this.snakebody[i][3].style.height = len + "px";
this.snakebody[i][3].style.backgroundColor = this.snakebody[i][2];
//絕對定位及位置
this.snakebody[i][3].style.position = "absolute";
//把蛇節(jié)追加給body
document.body.appendChild(this.snakebody[i][3]);
}
this.snakebody[i][3].style.left = this.snakebody[i][0] * len + "px";
this.snakebody[i][3].style.top = this.snakebody[i][1] * len + "px";
}
}
//b.移動小蛇
this.movesnake = function () {
//非蛇頭蛇節(jié)(當前蛇節(jié)的新坐標 是"下個蛇節(jié)"的舊坐標)
for (var i = 0; i < this.snakebody.length - 1; i++) {
this.snakebody[i][0] = this.snakebody[i + 1][0];
this.snakebody[i][1] = this.snakebody[i + 1][1];
}
if (this.redirect == "right") {
//蛇頭x坐標遞增
this.snakebody[this.snakebody.length - 1][0] += 1;
}
if (this.redirect == "left") {
//蛇頭x坐標遞減
this.snakebody[this.snakebody.length - 1][0] -= 1;
}
if (this.redirect == "up") {
//蛇頭y坐標遞減
this.snakebody[this.snakebody.length - 1][1] -= 1;
}
if (this.redirect == "down") {
//蛇頭y坐標遞增
this.snakebody[this.snakebody.length - 1][1] += 1;
}
//判斷蛇頭碰到食物
//蛇頭坐標
var xSnake = this.snakebody[this.snakebody.length - 1][0];
var ySnake = this.snakebody[this.snakebody.length - 1][1];
//食物坐標food.xFood/food.yFood;
if (xSnake == food.xFood && ySnake == food.yFood) {
//吃食物增加蛇節(jié)
var newjie = [this.snakebody[0][0], this.snakebody[0][1], 'green', null];
this.snakebody.unshift(newjie);//把newjie放到數(shù)組的第一個位置去
//原食物消失，重新生成一個食物
food.showfood();
}
//控制小蛇在地圖范圍內(nèi)移動
if (xSnake < 0 || xSnake > 39 || ySnake < 0 || ySnake > 19) {
alert('game over');
clearInterval(mytime);
return false;
}
//吃到自己判斷(蛇頭坐標與其他蛇節(jié)坐標一致)
for (var k = 0; k < this.snakebody.length - 1; k++) {
if (this.snakebody[k][0] == xSnake && this.snakebody[k][1] == ySnake) {
alert('game over kill you by yourself');
clearInterval(mytime);
return false;
}
}
//根據(jù)新坐標繪制小蛇
this.showsnake();
}
}
window.onload = function () {
var map = new Map();
map.showmap();
food = new Food();//聲明為全局的以便在該加載事件函數(shù)外部訪問
food.showfood();
snake = new Snake();//聲明為全局的snake對象
snake.showsnake();
//移動小蛇
//setInterval(全局變量，時間)
mytime = setInterval("snake.movesnake()", 200);
//設置鍵盤事件，控制器小蛇移動方向
document.onkeydown = function (evt) {
var num = evt.keyCode;//通過事件對象獲得數(shù)值碼，進而知道被觸發(fā)鍵子
if (num == 38) {
snake.redirect = "up";
}
if (num == 40) {
snake.redirect = "down";
}
if (num == 37) {
snake.redirect = "left";
}
if (num == 39) {
snake.redirect = "right";
}
}
}
</script>
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
<body></body>
</html>感謝你能夠認真閱讀完這篇文章，希望小編分享JS制作簡易版貪吃蛇小游戲的案例內(nèi)容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業(yè)資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。
