动态字符游戏：HTML+JavaScript 实现-优快云博客

本文链接：https://blog.youkuaiyun.com/u011107187/article/details/10829987

<html>
<head><title></title>
<script>
//字符串类
function charDiv(x,y){
// private divChar
var divChar ;
// char array
var charArray = ["A","B","C","D","E","F","G","H","I","G","K","L","M","N"];
//color array
var colorArray=["yellow","red","blue","green","pink","orange"];
// random product char from charArray
function randomChar(){
return charArray[parseInt(Math.random()*charArray.length)];
}
// random product color from colorArray
function randomColor(){
return colorArray[parseInt(Math.random()*colorArray.length)];
}
function create(){
divChar=document.createElement("div");
divChar.style.border="1px red solid";
divChar.style.position="absolute";
divChar.innerHTML=randomChar();
divChar.style.top=y;
divChar.style.left=x;
divChar.style.width="40px";
divChar.style.height="40px";
divChar.style.background =randomColor();
board.appendChild(divChar);
}
create();
//move this div
this.move = function(){
divChar.style.top= parseInt(divChar.style.top)+10;
}
//hide this div
this.dispose = function(){
divChar.style.display = "none";
}
//get this div innerHTML
this.getInnerHTML = function(){
return divChar.innerHTML;
}
}
function game(){
var arrayChar = new Array();
//function to product 6 charDiv ;add they to array
function productChars(){
for (i=0;i<6;i++){
var testObject = new charDiv(100+Math.random()*300+50,100,"A");
arrayChar.push(testObject);
}
}
// loop function
function loop(){
setInterval(function(){
for (i=0;i<6;i++){
arrayChar[i].move();
}
},400);
}
//onkeydown event to document function
function keyListen(){
document.οnkeydοwn=function(e){
var keyChar=String.fromCharCode(e.which);
for (i=0;i<arrayChar.length;i++){
//alert("for loop -->"+i+keyChar + arrayChar[i].getInnerHTML());
if(keyChar == arrayChar[i].getInnerHTML()){
arrayChar[i].dispose();
}
}
};
}
this.start = function(){
//product 6 charDiv ;add they to array
productChars();
// set interval
loop();
//add onkeydown event to document
keyListen();
}
}
function start(){
var g =new game();
g.start();
}
//游戏开始函数
function gameStart(){
var arrayChar = new Array();
//product 6 charDiv ;add they to array
for (i=0;i<6;i++){
var testObject = new testDiv(100+Math.random()*500+50,100,"A");
testObject.create();
arrayChar.push(testObject);
}
setInterval(function(){
for (i=0;i<6;i++){
arrayChar[i].move();
}
},400);
//add onkeydown event to document
document.οnkeydοwn=keydown;
//private keydown function
function keydown(e){
var keyChar=String.fromCharCode(e.which);
//alert(keyChar);
for (i=0;i<arrayChar.length;i++){
//alert("for loop -->"+i+keyChar + arrayChar[i].getInnerHTML());
if(keyChar == arrayChar[i].getInnerHTML()){
arrayChar[i].dispose();
}
}
}
}
</script>
</head>
<body>
<div id="board" style="border:1px red solid;width:500px;height:400px;"></div>
<button οnclick="start()">Test</button>
</body>
</html>

js类的封装