這是剛學JS一個星期的時候,李老師說現在就可以自己寫一個乒乓球遊戲,然後想了想花了2個小時把它寫出來了,寫完之後發現確實很簡單很多東西就應該自己大膽的去寫。做完之後,李老師讓我給大家講了一下,感覺好高興啊!
當時主要從下邊幾個方面講的:1.原理2.實現3.內容。
原理:1.讓球一直碰撞反彈。2.通過鍵盤控制拍子的來回移動。3.判斷輸贏。
實現:1.為了實現球的碰撞反彈,需要寫出二個方法:上下移動和左右移動。
2.為了實現拍子的左右移動分別要寫出四個方法:綠色球拍的左移動、右移動和黑色球拍的左移動、右移動。
3.為了能通過鍵盤控制拍子移動,需要寫一個方法來實現這個鍵盤事件。
內容:
1.碰撞反彈的實現。
2.判斷輸贏。
3.拍子如何左右移動。
4.鍵盤事件的實現。
function move_lr(){ //球左右移動並且判斷輸贏
}
function move_td(){//球的上下移動
}
function move_t_l(){//綠方左移動
}
function move_t_r(){//綠方右移動
}
function move_d_l(){//黑方左移動
}
function move_d_r(){//黑方右移動
}
function keyDown(e){//鍵盤事件
}
function onload(){
}
部分JS代碼如下:
function move_lr(){ //球左右移動
if(lr){
if(wscroll<=wid){
wscroll++;
divs[2].style.left=wscroll+"px";
}
else
lr=false;
}
else{
if(wscroll>=0){
wscroll--;
divs[2].style.left=wscroll+"px";
}
else
lr=true;
}
if(hscroll==20){
if (wscroll>=top_l-20&&wscroll<=top_r){
td=true;
}
else{
clearInterval(time1);
clearInterval(time2);
alert("綠方輸了!!重玩按F5!!!");
}
}
else if(hscroll==260){
if (wscroll>=down_l-20&&wscroll<=down_r)
td=false;
else{
clearInterval(time1);
clearInterval(time2);
alert("黑方輸了重玩按F5!!!");
}
}
}
function move_td(){//球的上下移動
if(td){
if (hscroll<=hei)
{
hscroll++;
divs[2].style.top=hscroll+"px";
}
else
td=false;
}
else{
if (hscroll>0)
{
hscroll--;
divs[2].style.top=hscroll+"px";
}
else
td=true;
}
}
function move_t_l(){
if(top_l<160){
top_l+=3;
top_r+=3;
divs[1].style.left=top_l+"px";
}
}
function move_t_r(){
if(top_l>0){
top_l-=3;
top_r-=3;
divs[1].style.left=top_l+"px";
}
}
function move_d_l(){
if(down_l<160){
down_l+=3;
down_r+=3;
divs[3].style.left=down_l+"px";
}
}
function move_d_r(){
if(down_l>0){
down_l-=3;
down_r-=3;
divs[3].style.left=down_l+"px";
}
}
function keyDown(e){
// var keycode = e.which; //得到的是鍵盤對應的數值
var realkey = String.fromCharCode(e.which); //得到的是鍵盤對應的字母
// var rr= realkey;
switch(realkey){
case "W":
move_t_l();
break;
case "E":
move_t_r();
break;
case "A":
move_d_l();
break;
case "D":
move_d_r();
break;
}
}
function onload(){
divs=document.getElementsByTagName("div");
wid=divs[0].clientWidth-divs[2].offsetWidth;
hei=divs[0].clientHeight-divs[2].offsetHeight;
wscroll=divs[2].offsetLeft;
hscroll=divs[2].offsetTop;
top_l=divs[1].offsetLeft;
top_r=top_l+100;
down_l=divs[3].offsetLeft;
down_r=down_l+100;
time1=setInterval("move_lr()",10);
time2=setInterval("move_td()",10);
document.onkeydown=keyDown;
}