네이티브 js_javascript 기술로 구현된 Snake 웹 버전 게임의 전체 예-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

네이티브 js_javascript 기술로 구현된 Snake 웹 버전 게임의 전체 예

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:58 PM

js게임뱀

이 기사의 예에서는 네이티브 js로 구현된 Snake 웹 버전의 게임을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生js写的贪吃蛇网页版游戏</title>
</head>
<body>
</body>
<script> 
Star = {
init:function(){
var bigDiv = this.appendEle(this.addStyle(this.creatEle(),
{w:'900',h:'600',p:'absolute',t:10,l:500}));
for(var i = 0; i<600/30;i++){
Star.data.arrayAll[i] = [];
for(var j = 0; j<900/30; j++){
div = this.addStyle(this.creatEle(),{w:(!+[1,] &#63; 30 :28),h:(!+[1,] &#63; 30 :28),f:'left',border:'1px solid #666'});
div.setAttribute('number', i*30+j)
this.appendEle(div,bigDiv)
Star.data.arrayAll[i][j] = div;
}
}
bigDiv = this.appendEle(this.addStyle(this.creatEle(),
{w:'900',h:'600',p:'absolute',t:10,l:500}));
this.pushEleInSelect(Star.data.arrayAll[9][15],Star.data.arrayAll[9][14],Star.data.arrayAll[9][13])
this.keyBoard.apply(this,arguments);
this.appearPoint();
this.leftGo();
},
appearPoint:function(){
var arrayIn = [];
var number;
for(var i = 0; i<600; i++){
if(!this.hasInArray(Star.data.arrayAll[parseInt(i/30)][i%30].getAttribute('number'),Star.data.arraySelect)){
arrayIn.push(Star.data.arrayAll[i])
}
}
Star.data.foodNumber = number = parseInt(Math.random()*arrayIn.length);
this.giveColor(number)
},
giveColor:function(number){
var div = Star.data.arrayAll[parseInt(number/30)][number%30];
Star.timeInterval.timeB = setInterval(function(){
if(div.className == 'shanshuo'){
div.className = ''
div.style.backgroundColor = '#fff'
}
else{
div.className = 'shanshuo';
div.style.backgroundColor = '#f00'
}
},500)
},
disappearColor:function(){
clearInterval(Star.timeInterval.timeB);
Star.data.arrayAll[parseInt(Star.data.foodNumber/30)][Star.data.foodNumber%30].style.backgroundColor = '#f00';
},
hasInArray:function(number,array){
for(var i in array){
if(array[i] instanceof Array){
if(this.hasInArray(number,array[i])){
return true;
}
}
if(array[i].getAttribute && array[i].getAttribute('number') == number) return true;
}
return false;
},
keyBoard:function(){
var self = this;
document.onkeydown = function(e){
e = e&#63; e : window.event;
switch(e.keyCode){
case 37: if(Star.keycode == 37 || Star.keycode == 39){return;}; self.leftGo(); break;
case 38: if(Star.keycode == 38 || Star.keycode == 40){return;}; self.upGo();break;
case 39: if(Star.keycode == 37 || Star.keycode == 39){return;}; self.rightGo();break;
case 40: if(Star.keycode == 38 || Star.keycode == 40){return;}; self.downGo();break;
}
}
},
leftGo:function(){
var div, number , self = this;
Star.keycode = 37;
clearInterval(Star.timeInterval.timeA)
Star.timeInterval.timeA = setInterval(function(){
number = Star.data.arraySelect[0].getAttribute('number');
if(number%30<=0 || self.hasInArray(number-1,Star.data.arraySelect)){
self.guanle();
}
else{
if(Star.data.foodNumber == number-1){
self.pushEleInSelect(Star.data.arrayAll[parseInt(Star.data.foodNumber/30)][Star.data.foodNumber%30]);
self.disappearColor();
self.appearPoint();
}
else{
div = Star.data.arraySelect.pop();
div.style.background = '#fff';
self.pushEleInSelect(Star.data.arrayAll[parseInt(number/30)][number%30-1]);
}
}
},Star.timeInterval.speed)
},
upGo:function(){
var div, number , self = this;
Star.keycode = 38;
clearInterval(Star.timeInterval.timeA)
Star.timeInterval.timeA = setInterval(function(){
number = parseInt(Star.data.arraySelect[0].getAttribute('number'));
if(parseInt(number/30)<=0 || self.hasInArray(number-30,Star.data.arraySelect)){
self.guanle();
}
else{
if(Star.data.foodNumber == number-30){
self.pushEleInSelect(Star.data.arrayAll[parseInt(Star.data.foodNumber/30)][Star.data.foodNumber%30]);
self.disappearColor();
self.appearPoint();
}
else{
div = Star.data.arraySelect.pop();
div.style.background = '#fff';
self.pushEleInSelect(Star.data.arrayAll[parseInt(number/30)-1][number%30]);
}
}
},Star.timeInterval.speed)
},
rightGo:function(){
var div, number , self = this;
Star.keycode = 39;
clearInterval(Star.timeInterval.timeA)
Star.timeInterval.timeA = setInterval(function(){
number = parseInt(Star.data.arraySelect[0].getAttribute('number'));
if(parseInt(number%30)>=29 || self.hasInArray(number+1,Star.data.arraySelect)){
self.guanle();
}
else{
if(Star.data.foodNumber == number+1){
self.pushEleInSelect(Star.data.arrayAll[parseInt(Star.data.foodNumber/30)][Star.data.foodNumber%30]);
self.disappearColor();
self.appearPoint();
}
else{
div = Star.data.arraySelect.pop();
div.style.background = '#fff';
self.pushEleInSelect(Star.data.arrayAll[parseInt(number/30)][number%30+1]);
}
}
},Star.timeInterval.speed)
},
downGo:function(){
var div, number , self = this;
Star.keycode = 40;
clearInterval(Star.timeInterval.timeA)
Star.timeInterval.timeA = setInterval(function(){
number = parseInt(Star.data.arraySelect[0].getAttribute('number'));
if(parseInt(number/30)>=19 || self.hasInArray(number+30,Star.data.arraySelect)){
self.guanle();
}
else{
if(Star.data.foodNumber == number+30){
self.pushEleInSelect(Star.data.arrayAll[parseInt(Star.data.foodNumber/30)][Star.data.foodNumber%30]);
self.disappearColor();
self.appearPoint();
}
else{
div = Star.data.arraySelect.pop();
div.style.background = '#fff';
self.pushEleInSelect(Star.data.arrayAll[parseInt(number/30)+1][number%30]);
}
}
},Star.timeInterval.speed)
},
guanle:function(){
alert('撞墙了,总分：' + (Star.data.arraySelect.length-3) * parseInt(1000 / Star.timeInterval.speed));
location.reload();
},
creatEle:function(tag){
var tagName = tag || 'DIV'
return document.createElement(tagName)
},
appendEle:function(ele,father){
var father = father || document.body || document.documentElement
father.appendChild(ele)
return ele;
},
addStyle:function(ele,css){
for(var i in css){
switch(i){
case 'b' : ele.style.background = css[i]; break;
case 'l' : ele.style.left = css[i]+'px'; break;
case 'r' : ele.style.right = css[i]+'px'; break;
case 't' : ele.style.top = css[i]+'px'; break;
case 'd' : ele.style.down = css[i]+'px'; break;
case 'p' : ele.style.position = css[i]; break;
case 'w' : ele.style.width = css[i]+'px'; break;
case 'h' : ele.style.height = css[i]+'px'; break;
case 'f' : ele.style.cssFloat = css[i]; ele.style.styleFloat = css[i]; break;
default : ele.style[i] = css[i]; break;
}
}
return ele;
},
pushEleInSelect:function(){
for(var i = 0; i<arguments.length; i++){
Star.data.arraySelect = [arguments[i]].concat(Star.data.arraySelect)
this.addStyle(arguments[i],{b:'#f00'})
}
}
}
Star.data={
arrayAll : [],
arraySelect:[],
newPoint:null,
foodNumber:0
}
Star.timeInterval={
timeA:null,
timeB:null
}
Star.keycode = 0;
window.onload = function(){
var select = Star.creatEle('select');
var optionDefault = Star.creatEle('option');
optionDefault.innerHTML = '请选择关卡'
Star.appendEle(optionDefault,select)
Star.addStyle(select,{w:200,h:30,p:'absolute',left:'40%',top:'40%'})
for(var i = 0 ; i <10 ; i++){
var option = Star.creatEle('option');
option.innerHTML = '第' + (i+1) + '关'
Star.appendEle(option,select);
}
Star.appendEle(select)
select.onchange = function(){
selectValue = select.options[select.selectedIndex].value || select.options[select.selectedIndex].innerHTML
var number = selectValue.match(/\d+/)[0]
Star.timeInterval.speed = parseInt(200/number);
Star.addStyle(select,{display:'none'});
Star.init();
}
}
</script>
</html>

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

如何使用JS和百度地图实现地图平移功能Nov 21, 2023 am 10:00 AM

如何使用JS和百度地图实现地图平移功能百度地图是一款广泛使用的地图服务平台，在Web开发中经常用于展示地理信息、定位等功能。本文将介绍如何使用JS和百度地图API实现地图平移功能，并提供具体的代码示例。一、准备工作使用百度地图API前，首先需要在百度地图开放平台（http://lbsyun.baidu.com/）上申请一个开发者账号，并创建一个应用。创建完成

如何使用JS和百度地图实现地图多边形绘制功能Nov 21, 2023 am 10:53 AM

如何使用JS和百度地图实现地图多边形绘制功能在现代网页开发中，地图应用已经成为常见的功能之一。而地图上绘制多边形，可以帮助我们将特定区域进行标记，方便用户进行查看和分析。本文将介绍如何使用JS和百度地图API实现地图多边形绘制功能，并提供具体的代码示例。首先，我们需要引入百度地图API。可以利用以下代码在HTML文件中导入百度地图API的JavaScript

js字符串转数组Aug 03, 2023 pm 01:34 PM

js字符串转数组的方法：1、使用“split()”方法，可以根据指定的分隔符将字符串分割成数组元素；2、使用“Array.from()”方法，可以将可迭代对象或类数组对象转换成真正的数组；3、使用for循环遍历，将每个字符依次添加到数组中；4、使用“Array.split()”方法，通过调用“Array.prototype.forEach()”将一个字符串拆分成数组的快捷方式。

如何使用JS和百度地图实现地图热力图功能Nov 21, 2023 am 09:33 AM

如何使用JS和百度地图实现地图热力图功能简介：随着互联网和移动设备的迅速发展，地图成为了一种普遍的应用场景。而热力图作为一种可视化的展示方式，能够帮助我们更直观地了解数据的分布情况。本文将介绍如何使用JS和百度地图API来实现地图热力图的功能，并提供具体的代码示例。准备工作：在开始之前，你需要准备以下事项：一个百度开发者账号，并创建一个应用，获取到相应的AP

js中new操作符做了哪些事情Nov 13, 2023 pm 04:05 PM

js中new操作符做了：1、创建一个空对象，这个新对象将成为函数的实例；2、将新对象的原型链接到构造函数的原型对象，这样新对象就可以访问构造函数原型对象中定义的属性和方法；3、将构造函数的作用域赋给新对象，这样新对象就可以通过this关键字来引用构造函数中的属性和方法；4、执行构造函数中的代码，构造函数中的代码将用于初始化新对象的属性和方法；5、如果构造函数中没有返回等等。

用JavaScript模拟实现打字小游戏！Aug 07, 2022 am 10:34 AM

这篇文章主要为大家详细介绍了js实现打字小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。

php可以读js内部的数组吗Jul 12, 2023 pm 03:41 PM

php在特定情况下可以读js内部的数组。其方法是：1、在JavaScript中，创建一个包含需要传递给PHP的数组的变量；2、使用Ajax技术将该数组发送给PHP脚本。可以使用原生的JavaScript代码或者使用基于Ajax的JavaScript库如jQuery等；3、在PHP脚本中，接收传递过来的数组数据，并进行相应的处理即可。

js是什么编程语言？May 05, 2019 am 10:22 AM

js全称JavaScript，是一种具有函数优先的轻量级，直译式、解释型或即时编译型的高级编程语言，是一种属于网络的高级脚本语言；JavaScript基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式，如函数式编程。

See all articles

핫 AI 도구

뜨거운 도구

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는