1. Forum
  2. Usenet
  3. COMP.LANG.JAVASCRIPT

  • I am presenting you a new game: a game of clicking stars.

    From Kristjan Robam@21:1/5 to All on Tue Sep 6 04:10:08 2022
    It contains of folder images, which has transparent star images 1.png up to 11.png. (Which you have to create yourself, because I cannot post it here)

    Then file clickgame.html:


    <html>
    <head>
    <meta name="viewport" content="width=345, initial-scale=1.0,
    minimum-scale=1.0, maximum-scale=1.0">
    <script src="yyyyyyyyyyyyyyyyyyyy.yy"></script>
    <style type="text/css">
    .a1 {
    }
    .a15 {
    font-size:15px;
    }
    .currtime {
    }
    .a2 {
    width: 100%;
    position:absolute;
    top:0;
    }
    .link1 {
    }
    a:link {
    }
    .a3 {
    position:relative;
    top:0vw;
    }
    .myCanvas {
    position:relative;
    left:0vw;
    display: inline-block;
    top:0px;
    }
    .score {
    font-size:15px;
    }
    .currtime {
    font-size:15px;
    }
    .toplist {
    font-size:15px;
    }

    .aaa1 {
    display:inline-block;
    height: 70vh;
    display:absolute;
    top:0px;
    }
    .topplayers {
    display:block;
    position:absolute;
    width:100%;
    vertical-align:top;
    left: 0;
    top: 89vh;
    }


    body {
    background-color: lightblue;
    color: white;
    }

    </style>
    </head>
    <body>
    <h1 class="a1">Clicking game. </h1>
    <p class="a3"></p>
    <div class="aaa1">
    <canvas class="myCanvas" width="1300px" height="580px" style="border:1px solid #d3d3d3;">
    Error</canvas>
    <p class="a2"></p>
    </div>
    <p></p>
    <div class="topplayers">
    <h1 class="a15">Click as many stars as you can in 15 seconds !</h1>
    <button id="startgame1" name="B e g i n ........." onclick="startgameofclicks()">B e g i n .........</button>
    <h1 class="a15">Clicks:</h1>
    <div class="score">0</div>
    <h1 class="a15">Time:</h1>
    <div class="currtime">0</div>
    <h1 class="a15">Top players:</h1>
    <div class="toplist"></div>
    </div>


    <script>
    var aaa=46;
    var aaa12=6;

    var circles = new Array();

    var circlenr=1;
    var x = 70;
    var y = 100;
    var radius = 43;
    var nextX, nextY;
    var WIDTH = 1200;
    var HEIGHT = 480;
    var countt=0;
    var circlesnumber=1;
    var gamestatus="";
    var newcirclecreationcount=0;
    var playerscore=0;


    function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
    }


    function randomdir(direction) {
    newdirection="";
    while(true) {
    var newd=getRandomInt(1,4);
    if(newd==1) newdirection="right";
    if(newd==2) newdirection="up";
    if(newd==3) newdirection="left";
    if(newd==4) newdirection="down";
    if(direction!=newdirection) break;
    }
    return newdirection;
    }
    function randomdir() {
    newdirection="";
    var newd=getRandomInt(1,4);
    if(newd==1) newdirection="right";
    if(newd==2) newdirection="up";
    if(newd==3) newdirection="left";
    if(newd==4) newdirection="down";
    return newdirection;
    }
    function getnextdegree(degree) {
    var newdeg=degree+10;
    if(newdeg>359) newdeg=newdeg-360;
    return newdeg;
    }


    function circlescollidingextended(ca1_x, ca1_y, ca2_x, ca2_y, radiusa1) {

    if(Math.sqrt((ca1_x-ca2_x)*(ca1_x-ca2_x)+(ca1_y-ca2_y)*(ca1_y-ca2_y)<radiusa1*2))
    return true;
    return false;
    }

    function cancreatecircle(x111, y111) {
    var collision=false;
    for (var i=0; i<circles.length; i++) {

    if(circlescollidingextended(x111,y111,circles[i].x,circles[i].y,circles[i].radius))
    {
    collision=true;
    return false;
    break;
    }
    }
    if(collision) return false;
    return true;
    }

    function circlescolliding(circlea1, circlea2) {

    if(Math.sqrt((circlea1.x-circlea2.x)*(circlea1.x-circlea2.x)+(circlea1.y-circlea2.y)*(circlea1.y-circlea2.y))<circlea1.radius*2)
    return true;
    return false;
    }



    var c = document.getElementsByClassName("MyCanvas")[0];
    var ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.rect(0, 0, 555, 1200);
    ctx.closePath();

    function isinCircle(evx, evy, circlex, circley, r) {
    return Math.sqrt((evx-circlex)*(evx-circlex) +
    (evy-circley)*(evy-circley)) < r;
    }
    c.addEventListener('click', function(event) {
    var rect = c.getBoundingClientRect();



    var mouse_x=(event.clientX - rect.left) / (rect.right - rect.left) *
    c.width;
    var mouse_y=(event.clientY - rect.top) / (rect.bottom - rect.top) *
    c.height;

    var canvasOffset=$(".myCanvas").offset();

    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;

    var ev_x=event.pageX-offsetX;
    var ev_y=event.pageY-offsetY;
    for (var i = circles.length - 1; i >= 0; --i) {
    if(isinCircle(ev_x, ev_y, circles[i].x+7.5, circles[i].y+7.5, radius)) { if(gamestatus=="stop") break;
    playerscore++;
    document.getElementsByClassName("score")[0].innerHTML = playerscore; circles[i].dontdraw=true;
    circlefadeout(circles[i], aaa*2, i);
    } else {
    }
    }
    });

    function circlefadeout(circleabc, circlewidthabc,circleidx) { circleabc.x=circleabc.x-61;
    circleabc.y=circleabc.y-61;
    circlewidthabc=circlewidthabc+122;
    if(circlewidthabc>7292) {
    circles.splice(circleidx,1);
    return;
    }
    ctx.beginPath();
    ctx.clearRect(circleabc.x, circleabc.y, circlewidthabc, circlewidthabc); imgObj=new Image();
    imgObj.src=circleabc.imagesrc;
    ctx.drawImage(imgObj, circleabc.x, circleabc.y,
    circlewidthabc,circlewidthabc);
    ctx.closePath();
    setTimeout(function() { circlefadeout(circleabc, circlewidthabc,circleidx);
    }, 2);
    }


    var imgObj;

    function clear() {
    ctx.clearRect(0, 0, c.width, c.height);
    }


    function drawcircle(circlea) {

    ctx.save();
    ctx.beginPath();
    ctx.translate(circlea.x+aaa,circlea.y+aaa);
    circlea.degree=getnextdegree(circlea.degree);
    ctx.rotate(circlea.degree*Math.PI/180);
    ctx.translate(-circlea.x-aaa,-circlea.y-aaa);
    imgObj=new Image();
    imgObj.src=circlea.imagesrc;
    ctx.drawImage(imgObj, circlea.x, circlea.y, aaa*2,aaa*2);
    ctx.closePath();
    ctx.restore();

    }

    function createnewcircle() {

    var image000=Array("1.png", "2.png", "3.png", "4.png", "5.png", "6.png", "7.png", "8.png", "9.png", "10.png", "11.png");

    var imagesrc000 = image000[Math.floor(Math.random()*image000.length)];

    var x_rand=getRandomInt(0,WIDTH);
    var y_rand=getRandomInt(0,HEIGHT);
    if(!cancreatecircle(x_rand,y_rand)) {
    newcirclecreationcount++;
    if(newcirclecreationcount>987654321) {
    gamestatus='stop';
    return;
    }
    createnewcircle();
    return;
    }
    var newid=circlenr++;
    var newcirc = {
    x: x_rand,
    y: y_rand,
    radius: aaa,
    direction: randomdir(),
    id: 're'+newid,
    degree: 0,
    dontdraw: false,
    imagesrc: "/images/"+imagesrc000
    }
    circles.push(newcirc);
    drawcircle(newcirc);
    }

    c.onclick = function (event)
    {
    if(gamestatus=="stop") return;
    }
    var nameentered=false;

    function displaytoppl() {

    $.ajax({
    url: 'process.php',
    dataType: 'json',
    type: 'POST',
    async: true,
    data: { action: 'get'},
    success: function( data, textStatus, jQxhr ){
    var data1=data;
    var listofpl="Player &nbsp;&nbsp;&nbsp; Clicks<br>";
    for(var i=0; i<data1.length; i++) {
    listofpl=listofpl+data1[i]['playername']+" &nbsp;&nbsp;&nbsp;"+data1[i]['playerscore']+"<br>";
    }
    document.getElementsByClassName("toplist")[0].innerHTML = listofpl;
    },
    error: function( jqXhr, textStatus, errorThrown ){
    alert(errorThrown);
    }
    });
    }

    function entername() {

    if(nameentered) return;
    var name = prompt("Your name:", "");
    var psc=playerscore;
    nameentered=true;
    $.ajax({
    url: 'process.php',
    dataType: 'text',
    type: 'POST',
    async: true,
    data: { playername: name, playerscore: psc, action: 'add'},
    success: function( data, textStatus, jQxhr ){
    displaytoppl();
    },
    error: function( jqXhr, textStatus, errorThrown ){
    displaytoppl();
    }
    });
    }


    function makeamove(circle) {

    var x_rand=getRandomInt(0,WIDTH);
    var y_rand=getRandomInt(0,HEIGHT);

    switch(circle.direction) {
    case "right":
    {
    var collision=false;
    for (var i=0; i<circles.length; i++) {
    if(circle.id!=circles[i].id) {
    if(circlescolliding(circle,circles[i])) {
    collision=true;
    circle.direction="left";
    circle.x=x_rand;
    circle.y=y_rand;
    return;
    break;
    }
    }
    }
    if(collision) break;
    if(circle.x<WIDTH) {
    circle.x=circle.x+aaa12;
    break;
    } else {
    circle.direction=randomdir("right");
    makeamove(circle);
    break;
    }
    } break;
    case "left":
    {
    var collision=false;
    for (var i=0; i<circles.length; i++) {
    if(circle.id!=circles[i].id) {
    if(circlescolliding(circle,circles[i])) {
    collision=true;

    circle.direction="right";
    circle.x=x_rand;
    circle.y=y_rand;

    return;
    break;
    }
    }
    }
    if(collision) break;
    if(circle.x>0) {
    circle.x=circle.x-aaa12;
    break;
    } else {
    circle.direction=randomdir("left");
    makeamove(circle);
    break;
    }
    } break;
    case "up":
    {
    var collision=false;
    for (var i=0; i<circles.length; i++) {
    if(circle.id!=circles[i].id) {
    if(circlescolliding(circle,circles[i])) {
    collision=true;

    circle.direction="down";
    circle.x=x_rand;
    circle.y=y_rand;

    return;
    break;
    }
    }
    }
    if(collision) break;
    if(circle.y>0) {
    circle.y=circle.y-aaa12;
    break;
    } else {
    circle.direction=randomdir("up");
    makeamove(circle);
    break;
    }
    } break;
    case "down":
    {
    var collision=false;
    for (var i=0; i<circles.length; i++) {
    if(circle.id!=circles[i].id) {
    if(circlescolliding(circle,circles[i])) {
    collision=true;
    circle.direction="up";
    circle.x=x_rand;
    circle.y=y_rand;

    return;
    break;
    }
    }
    }
    if(collision) break;
    if(circle.y<HEIGHT) {
    circle.y=circle.y+aaa12;
    break;
    } else {
    circle.direction=randomdir("down");
    makeamove(circle);
    break;
    }
    } break;
    default:

    }

    }

    var playingtime=0;
    var timestart=new Date().getTime();
    var timenow=0;
    var countedtime=0;
    var lasttime=timestart;
    function gameofclicks() {
    timenow=new Date().getTime();
    if(nameentered) return;
    if(playingtime>15) gamestatus="stop";

    if(circles.length>6650) gamestatus="stop";

    if(nameentered == 'true') return;
    if(gamestatus == 'stop') entername();
    clear(WIDTH, HEIGHT);

    for(var i=0; i<circles.length; i++) {
    var circle=circles[i];
    makeamove(circle);
    circlenr++;
    if(circle.dontdraw==false) drawcircle(circle);
    }


    countedtime=timenow-timestart;

    playingtime=parseInt(countedtime/1000);
    document.getElementsByClassName("currtime")[0].innerHTML = playingtime;

    if(timenow-lasttime>301&&circles.length<111) {
    newcirclecreationcount=0;
    createnewcircle();
    lasttime=timenow;
    for(var i=0; i<circles.length; i++) {
    circles[i].direction=randomdir(circles[i].direction);
    }
    }

    setTimeout(gameofclicks, 13);


    }


    $( document ).ready(function() {
    imgObj=new Image();

    var image00=Array("1.png", "2.png", "3.png", "4.png", "5.png", "6.png", "7.png", "8.png", "9.png", "10.png", "11.png");


    imgObj.src = "/images/"+image00[Math.floor(Math.random()*image00.length)];


    displaytoppl();
    createnewcircle();
    imgObj.onload = function()
    {
    ctx.drawImage(imgObj, circles[0].x, circles[0].y, aaa*2, aaa*2);
    }
    });

    function startgameofclicks() {
    $("#startgame1").remove();
    setTimeout(gameofclicks, 50);
    }


    </script>
    </body>
    </html>


    The yyyyyyyyyyyyyyyyyyyy.yy is jquery.min.js.


    Then it contains also process.php:

    <?php

    class Table1 {
    var $playername;
    var $playerscore;
    function __construct($aa,$bb) {
    $this->playername=$aa;
    $this->playerscore=$bb;

    }
    }
    function mysort($aa, $bb)
    {
    $a00=0;
    if($aa->playerscore<$bb->playerscore) $a00=1; else $a00=-1;
    return $a00;
    }

    $scores=array();
    $filePath = getcwd().DIRECTORY_SEPARATOR."yyyyyyyyyyyyyyyy";

    if(file_exists($filePath)) {

    $objData = file_get_contents($filePath);
    $scores = unserialize($objData);
    if($scores==null) $scores=array();
    } else {
    $f=fopen($filePath, "w+");
    chmod($filePath, 0777);
    fclose($f);
    }

    $playername=null;
    $playerscore=null;

    $action=$_POST['action'];

    if($action=="add") {
    $playername=$_POST['playername'];
    $playername=strip_tags($playername);
    $playername=str_replace(" ","&nbsp;",$playername);

    if(strlen($playername)>554254) exit(0);
    $playerscore=$_POST['playerscore'];
    }

    if($action=="add") {
    if($playername!=""&&$playerscore>0&&$playerscore<923254) {
    $obj = new Table1($playername,$playerscore);

    $scores[]=$obj;
    $objData = serialize( $scores);
    $add00000=true;
    if(($_POST['playername']=="") || ($_POST['playername']==null)
    || ($_POST['playername']==0)|| ($_POST['playername']=='null')) $add00000=false;

    if(is_writable($filePath)&&$add00000==true) {
    $fffa=fopen($filePath, "w+");
    fwrite($fffa, $objData);
    fclose($fffa);
    }

    }


    } else if($action=="get") {
    usort($scores, "mysort");
    echo json_encode($scores,true);
    }




    Happy trying ......


    And have a nice day.

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)